<template>
  <div class="chart-container">
    <div class="chart-box">
      <chart :series-data="seriesData" height="100%" width="100%" />
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/LineMarker' // 全局引入

export default {
  name: 'LineChart',
  components: { Chart },
  data() {
    return {
      seriesData: [
        {
          name: 'CMCC',
          data: [220, 182]
        },
        {
          name: 'CTCC',
          data: [120, 110]
        },
        {
          name: 'CUCC',
          data: [220, 182]
        }
      ],
      num: [100, 150, 200]
    }
  },
  mounted() {
    this.updataData()
  },
  methods: {
    updataData() {
      let n = 0
      setInterval(() => {
        n++
        this.num.forEach((element, index) => {
          if (n % 2 == 0) {
            this.num[index] += 50
          } else {
            this.num[index] -= 50
          }
        })
        this.seriesData[0].data.push(this.num[0])
        this.seriesData[1].data.push(this.num[1])
        this.seriesData[2].data.push(this.num[2])
      }, 1500)
    }
  }
}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.chart-box {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
}
</style>

